<template>
  <PageWrapper>
    <ScrollContainer>
      <div ref="wrapperRef" class="account-setting">
        <Tabs tab-position="top" :tabBarStyle="{ width: '100%' }">
          <Tabs.TabPane key="1" :tab="t('sys.work.list')">
            <List />
          </Tabs.TabPane>
          <Tabs.TabPane key="2" :tab="t('sys.work.evalTable')">
            <EvalTable />
          </Tabs.TabPane>
          <Tabs.TabPane key="3" :tab="t('sys.work.evalCard')">
            <EvalCard />
          </Tabs.TabPane>
          <Tabs.TabPane key="4" :tab="t('sys.work.indexList')">
            <IndexList />
          </Tabs.TabPane>
          <Tabs.TabPane key="5" :tab="t('sys.work.LevelList')">
            <LevelList />
          </Tabs.TabPane>
        </Tabs>
      </div>
    </ScrollContainer>
  </PageWrapper>
</template>
<script lang="ts" setup name="AccountCenter">
  import { Tabs } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Icon } from '/@/components/Icon';
  import { PageWrapper } from '/@/components/Page';
  import { ScrollContainer } from '/@/components/Container';

  import List from './list.vue';
  import EvalTable from './evalTable.vue';
  import EvalCard from './evalCard.vue';
  import IndexList from './indexList.vue';
  import LevelList from './levelList.vue';

  const { t } = useI18n();
  const getTitle = {
    icon: 'ion:person-outline',
    value: t('sys.account.center'),
  };
</script>
<style lang="less">
  .jeesite-page-wrapper .jeesite-page-wrapper-content {
    padding: 0 15px 15px 15px;
    border-radius: 5px;
  }
  .account-setting {
    .base-title {
      padding-left: 0;
    }

    .ant-tabs-tab-active {
      background-color: @item-active-bg;
    }
  }
</style>
